<template>
    <div class="home-box">
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="today-box">
                    <div class="icon-box">
                        <el-icon class="icons">
                            <Box />
                        </el-icon>
                    </div>
                    <div class="text-box">
                        <p class="today-price">今日收入</p>
                        <p>503,225.00</p>
                    </div>
                </div>
            </el-col>
        </el-row>
        <!-- chart图表 -->
        <el-row :gutter="20">
            <el-col :span="12">
                <!-- chart图表组件 -->
                <common-chart chart-type="bar" :options="barOptions"></common-chart>

            </el-col>
            <el-col :span="12">
                <common-chart chart-type="line" :options="lineOptions"></common-chart>
            </el-col>
        </el-row>
        <!-- 表格数据 -->
        <el-row :gutter="20">
            <el-col :span="24">
                <el-table :data="tableData" style="width: 100%" height="170px">
                    <el-table-column v-for="(val,key) in tableLabel" :key="key" :prop="key" :label="val" />
                </el-table>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
// import * as echarts from 'echarts';
import { getCurrentInstance, onMounted, ref } from 'vue';
import CommonChart from '../../components/CommonChart.vue';


const {proxy} = getCurrentInstance()
// import axios from 'axios'
// import request from '../../api/request.js';
// 图表配置项
// 条形图
const barOptions = {
    color: ['rgb(51, 202, 187)',],
    title: {
        text: '每日用户',
        textStyle: {
            fontWeight: 400,
            fontSize: 14
        }
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow',
            label: {
                color: '#fff',
                backgroundColor: 'rgba(0,0,0,.5)'
            }
        },
        backgroundColor: 'rgba(0,0,0,.5)',

        borderColor: 'rgba(0,0,0,.5)',
        textStyle: {
            color: '#fff',
        }

    },
    xAxis: {
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {},
    series: [
        {
            name: '销量',
            type: 'bar',
            data: [1800, 3520, 1550, 8410, 4350, 6060, 3210,]
        }
    ]
}
// 折线图
const lineOptions = {
    color: ['rgb(51, 202, 187)',],
    title: {
        text: '交易记录',
        textStyle: {
            fontWeight: 400,
            fontSize: 14
        }
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow',
            label: {
                color: '#fff',
                backgroundColor: 'rgba(0,0,0,.5)'
            }
        },
        backgroundColor: 'rgba(0,0,0,.5)',

        borderColor: 'rgba(0,0,0,.5)',
        textStyle: {
            color: '#fff',
        }

    },
    xAxis: {
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {},
    series: [
        {
            name: '销量',
            type: 'line',
            data: [10, 22, 58, 46, 75, 50, , 86],
            smooth: true,
        }
    ]
}
// 表格标题
const tableLabel = {
    name: '商品',
    todayBuy:'今日购买',
    monthBuy:'本月购买',
    totalBuy:'总购买'
}

// 表格数据
let tableData = ref([])
// 请求数据
const getTableList=async()=>{
   let res= await proxy.$api.getTableData()
   console.log(res);
   tableData.value=res.tableData
}

onMounted(() => {
    // 请求数据
    getTableList()
})


</script>


<style lang="less" scoped>
.today-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(51, 202, 187);
    ;
    color: #fff;
    height: 80px;
    border-radius: 5px;
    padding: 0 20px;

    .icon-box {
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgb(87, 211, 199);
    }

    .text-box {
        font-size: 24px;
        font-weight: 700;

        .today-price {
            font-size: 16px;
            font-weight: 400;
            margin-bottom: 10px;
        }
    }
}

.el-row {
    padding: 10px 0;
    background-color: #fff;
}
</style>